<template>
	<view class="container">
		
		<!-- <view class="glow-line"></view> -->
		<!-- 卡片区域：一行一张卡片 @longpress="editStudent(item)" @click="nativeToGrowthReport(item)"-->
		<view class="card-list">
			<view class="card" v-for="(item, index) in students" :key="index">

				<image class="qr-icon" src="../../../static/icon/qr.png" mode="aspectFit" @click.stop="openQr(item)" />
				<!-- 名字和等级同一行 + 操作按钮 -->
				<view class="card-header">
					<image class="avatar" :src="item.gender === '女' ?
								'../../../static/avatar/rabbit.png' :
								'../../../static/avatar/squirrel.png'" />
					<view class="name-level">
						<text class="name">{{ item.studentEnglishName }}<text
								style="font-size: 25rpx;">（{{item.studentName}}）</text><text
								class="badge-corner">{{ item.level ? item.level : '新学员' }}</text></text>

					</view>
					<view class="actions">
						<!-- <button class="action-btn review"><text class="icon-shake">⏰</text> 复习打卡</button> -->
						<!-- <button class="action-btn detail" ><text
								class="icon-wave">👉</text> 详情</button> -->
					</view>
				</view>
				<!-- 🟢 状态栏 -->
				<view class="class-status">
					<view class="status-row">
						<!-- 左：固定状态 -->
						<text class="dot" v-show="item.currentStatus =='正在上课'">●</text>
						<text class="dot" v-show="item.currentStatus =='自由活动'" style="color: gainsboro;">●</text>
						<text class="status-main">{{item.currentStatus}}</text>
						<!-- 右：固定会议号 -->
						<text class="sep">｜</text>
						<!-- 右：固定会议号（可点击） -->
						<view class="status-meeting" @click.stop="openTencentMeeting(item.meetingNo)">
							<text class="meeting-icon">📞</text>
							<text class="meeting-text">
								会议号 {{ item.meetingNo || '无课程安排' }}
							</text>
						</view>
						<text class="sep">｜</text>
						<!-- 中：自动来回滚动的课程 + 老师 -->
						<view class="status-scroll-wrapper">
							<view class="status-scroll-inner">

								<text class="status-main">
									{{ item.teacherName || '' }}
								</text>
								<text class="sep">｜</text>
								<text class="status-main">
									{{ item.courseName || '' }}
								</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 三个统计项在同一行显示，文字前加图标，下面是值 -->
				<view class="stats">
					<view class="stat-item">
						<text class="stat-label">📘 剩余课时</text>
						<view class="divider"></view>
						<text class="stat-value">{{ item.remainClassHours || "-"}}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">📖 已学课时</text>
						<view class="divider"></view>
						<text class="stat-value">{{ item.finishClassHours || "-"}}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">⭐ 积分</text>
						<view class="divider"></view>
						<text class="stat-value">{{ item.points || "-"}}</text>
					</view>
				</view>
				<view class="card-actions">
					<button class="card-btn card-btn-report" @click.stop="nativeToGrowthReport(item)">🌱
						成长报告</button>
					<button class="card-btn card-btn-schedule" @click.stop="goToSchedule(item)">📅 课程安排</button>
					<button class="card-btn card-btn-edit" @click.stop="editStudent(item)">✏️ 修改信息</button>

				</view>
			</view>

			<!-- 固定新增人员卡片 -->
			<view class="card add-card" v-if="students.length < 2" @click="showAddModal = true">
				<text class="add-symbol">＋</text>
				<text class="add-text"></text>
			</view>
		</view>

		<!-- 新增人员弹窗 -->
		<view class="modal-mask" v-if="showAddModal">
			<view class="modal f f animate-fade">
				<view class="modal-header">🖊</view>
				<view class="modal-body">
					<view class="input-group">
						<text class="label">姓名<text class="red-font">*</text></text>
						<input v-model="newStudent.studentName" class="input" placeholder="请输入姓名" />
					</view>
					<view class="input-group">
						<text class="label">英文名</text>
						<input v-model="newStudent.studentEnglishName" class="input" placeholder="请输入英文名" />
					</view>
					<view class="input-group">
						<text class="label">性别<text class="red-font">*</text></text>
						<radio-group @change="onGenderChange" class="radio-group">
							<label class="radio-item">
								<radio value="男" :checked="newStudent.gender==='男'" style="margin-right: 20rpx;" />
								男
							</label>
							<label class="radio-item">
								<radio value="女" :checked="newStudent.gender==='女'" style="margin-right: 20rpx;" />
								女
							</label>
						</radio-group>
					</view>
					<view class="input-group">
						<text class="label">出生年月<text class="red-font">*</text></text>
						<picker mode="date" :value="newStudent.birthday" @change="onBirthChange">
							<view class="picker">{{ newStudent.birthday || '请选择出生年月' }}</view>
						</picker>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-btn cancel" @click="cancelModal">取消</button>
					<button class="modal-btn confirm" @click="confirmAdd">确认</button>
				</view>
			</view>
		</view>

		<!-- 二维码弹窗 -->
		<view class="qr-mask" v-if="showQr">
			<view class="qr-modal animate-scale">

				<!-- 悬浮关闭按钮，不挤布局 -->
				<view class="qr-close" @click="showQr=false">×</view>

				<!-- 标题 -->
				<text class="qr-title">📱 扫码绑定学生</text>

				<!-- 说明文字 -->
				<text class="qr-subtitle">
					将此二维码分享给其他家长，使用微信扫码即可绑定该学生（每个学生最多可绑定 3 位家长），二维码有效期24小时
				</text>

				<!-- 二维码容器（完全居中） -->
				<view class="qr-box">
					<uqrcode canvas-id="qrCanvas" ref="uqrcode" :value="qrValue" :size="200"></uqrcode>
				</view>
				<!-- 🔽 新增：按钮区 -->
				<view class="qr-actions">
					<button class="qr-save-btn" @click="saveQr">保存二维码到相册</button>
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		data() {
			return {
				students: [],
				showAddModal: false,
				isEdit: false,
				editId: null,
				showQr: false,
				qrValue: "",
				editStudentId: null, // 新增：保存 studentId
				skipOnShowOnce: false,
				newStudent: {
					studentName: "",
					studentEnglishName: "",
					gender: "",
					birthday: ""
				},
				dailyQuote: "Do you Best!",
				dailyBg: "",
				dailyQuoteCn: "愿每一次阅读，都让孩子更闪亮 ✨",
				classStatus: {
					isRunning: true, // 是否正在上课
					statusName: "正在上课", // 状态名字
					className: "英语自然拼读", // 课程名称
					teacherName: "Ms. Li", // 老师
					meetingId: "839-223-391" // 会议号
				},
				isTeacher: true,

			};
		},
		onShow() {

			if (this.skipOnShowOnce) {
				console.log("扫码返回 → 跳过本次 onShow");
				this.skipOnShowOnce = false;
				return;
			}
			this.getDailyQuote();
			this.getStudent();

		},
		onLoad(options) {
			console.log("options:", options);

			let studentId = null;
			let inviterId = null;
			let qrGenerateTime = null;
			// ① 第一种形式：pages/index/index?studentId=xxx
			if (options.studentId) {
				studentId = options.studentId;
				console.log("方式1 - 直接参数 studentId:", studentId);
			}

			// ② 第二种：扫码普通链接二维码（参数在 q）
			if (options.q) {
				let url = decodeURIComponent(options.q);
				console.log("解码后的 URL:", url);
				this.skipOnShowOnce = true;
				let params = this.getQueryVariable(url);
				if (params.studentId) {
					studentId = params.studentId;
					inviterId = params.inviterId;
					qrGenerateTime = params.qrGenerateTime;
					api.bindStudent({
						studentId: studentId,
						inviterId: inviterId,
						qrGenerateTime: qrGenerateTime
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "绑定成功",
								icon: "success"
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						setTimeout(() => {
							this.getStudent();
						}, 1500);


					});
					console.log("方式2 - q 参数 studentId:", studentId);
				}
			}
		},
		methods: {
			openTencentMeeting(meetingId) {
				if (!meetingId || meetingId == null || meetingId == '') {
					uni.showToast({
						title: '当前没有正在进行的课程',
						icon: 'none'
					});
					return;
				}
				const id = this.classStatus.meetingId;
				// 腾讯会议给的写法：scene = encodeURIComponent('m=会议号')
				const scene = encodeURIComponent('m=' + id);

				// 只在微信小程序环境里跳
				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: 'wx33fd6cdc62520063', // 腾讯会议小程序 appId
					path: 'pages/index/index?chn=ExampleChannel&code=931-135-733',
					envVersion: 'release',
					success() {
						console.log('打开腾讯会议成功');
					},
					fail(err) {
						console.log('打开失败', err);
						uni.showToast({
							title: '无法打开腾讯会议，请手动进入',
							icon: 'none'
						});
					}
				});
				// #endif
			},
			getDailyQuote() {
				uni.request({
					url: 'https://open.iciba.com/dsapi/',
					success: (res) => {
						if (res.data && res.data.content) {
							//this.dailyBg = res.data.fenxiang_img || res.data.picture;
							this.dailyBg = res.data.picture2;
							this.dailyQuote = res.data.content
							this.dailyQuoteCn = res.data.note;
						}
					},
					fail: () => {
						this.dailyQuote = "愿每一次阅读，都让孩子更闪亮 ✨";
					}
				});
			},
			saveQr() {
				// 小程序/H5/App 都能用组件自带的 save()
				if (!this.$refs.uqrcode) {
					uni.showToast({
						title: '二维码还未生成，请稍后再试',
						icon: 'none'
					});
					return;
				}

				// 调用 uQRCode 组件内置的保存方法
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log('保存二维码失败:', err);
						uni.showToast({
							title: '保存失败，请检查相册权限',
							icon: 'none'
						});
					}
				});
			},
			getQueryVariable(url) {
				const queryStart = url.indexOf('?');
				if (queryStart === -1) return {};

				const query = url.slice(queryStart + 1);
				const vars = query.split('&');
				const obj = {};

				vars.forEach(item => {
					const pair = item.split('=');
					obj[pair[0]] = decodeURIComponent(pair[1] || '');
				});

				return obj;
			},
			openQr(item) {
				// 1. 取出 storage 里的 user
				let userRaw = uni.getStorageSync('user');
				let user = {};

				// 2. 既兼容字符串，也兼容对象
				if (typeof userRaw === 'string') {
					try {
						user = JSON.parse(userRaw) || {};
					} catch (e) {
						console.error('user 解析失败:', e);
						user = {};
					}
				} else if (typeof userRaw === 'object' && userRaw !== null) {
					user = userRaw;
				}

				// 1. 生成当前时间字符串：yyyy-MM-dd HH:mm:ss
				const now = new Date();
				const pad = n => (n < 10 ? '0' + n : '' + n);
				const qrGenerateTime =
					now.getFullYear() + '-' +
					pad(now.getMonth() + 1) + '-' +
					pad(now.getDate()) + ' ' +
					pad(now.getHours()) + ':' +
					pad(now.getMinutes()) + ':' +
					pad(now.getSeconds());

				// 2. 基础链接
				const baseUrl = 'https://www.frh-edu.com/bind';
				// 3. 拼接参数（注意 ? 和 & 的使用）
				const url = `${baseUrl}?studentId=${item.id}` +
					`&inviterId=${user.userId}` +
					`&qrGenerateTime=${encodeURIComponent(qrGenerateTime)}`;

				console.log('二维码 URL =', url);

				this.qrValue = url;
				this.showQr = true;
			},
			editStudent(item) {
				this.isEdit = true;
				this.editId = item.id; // 数据库里的主键 id
				this.editStudentId = item.studentId; // 业务上的 studentId
				this.editId = item.id;
				this.newStudent = {
					studentName: item.studentName,
					studentEnglishName: item.studentEnglishName,
					gender: item.gender,
					birthday: item.birthday
				};
				this.showAddModal = true;
			},
			getStudent() {
				api.getStudent({
					isTeacher: this.isTeacher
				}).then(
					res => {
						if (res.code == 200) {
							this.students = res.data
						} else {
							this.cancelModal();
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					},
					rej => {
						this.cancelModal();
					}
				);
			},
			nativeToGrowthReport(item) {
				uni.navigateTo({
					url: `../growthReport/growthReport?studentId=${item.id}&studentEnglishName=${item.studentEnglishName}&studentName=${item.studentName}`
				})
			},
			goToSchedule(item) {
				uni.navigateTo({
					url: `../schedule/schedule?studentId=${item.id}&studentEnglishName=${item.studentEnglishName}&studentName=${item.studentName}`
				})
			},
			onGenderChange(e) {
				this.newStudent.gender = e.detail.value;
			},
			onBirthChange(e) {
				this.newStudent.birthday = e.detail.value;
			},
			confirmAdd() {
				if (!this.newStudent.studentName) {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					});
					return;
				}

				if (this.isEdit) {
					// 修改
					api.studentUpdate({
						id: this.editId,
						studentId: this.editStudentId, // 把 studentId 带上
						...this.newStudent
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: "success"
							});
							this.showAddModal = false;
							this.isEdit = false;
							this.getStudent();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				} else {
					// 新增
					api.studentAdd(this.newStudent).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "新增成功",
								icon: "success"
							});
							this.showAddModal = false;
							this.getStudent();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				}
			},
			cancelModal() {
				this.showAddModal = false;
				this.isEdit = false;
				this.editId = null;
				this.newStudent = {
					studentName: "",
					studentEnglishName: "",
					gender: "",
					birthday: ""
				};
			}


		}
	};
</script>

<style>
	.container {
		padding: 5rpx 5rpx;
		background: linear-gradient(to bottom, #e6f4ea 0%, #fdfaf4 100%);
		min-height: 100vh;
		overflow-x: hidden;
	}

	/* 顶部标题 */
	.header {
		position: relative;
		padding-bottom: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(47, 64, 41, 0.15);
	}

	.header {
		height: 550rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: flex-end; */
		padding: 30rpx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 16rpx;
		position: relative;
		z-index: 1;
		/* 新增：header 在下层 */
	}




	.header-line {
		display: block;
		font-weight: bold;
		margin: 10rpx 0;
		font-family: "PingFang SC", "Helvetica Rounded", "Quicksand", sans-serif;
		color: #2f4029;
	}

	.hi {
		margin-left: 0;
		font-size: 70rpx;
	}

	.welcome {
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	.highlight {
		margin-left: 20rpx;
		margin-top: 40rpx;
		font-size: 40rpx;
		color: #ffffff;
	}

	/* 发光横线 */
	.glow-line {
		height: 6rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 6rpx;
		background: linear-gradient(270deg, #88d498, #cceabb, #fcd5ce, #f8edeb);
		background-size: 400% 400%;
		animation: glowMove 6s ease infinite;
	}

	@keyframes glowMove {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	/* 卡片 */
	.card-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 0 20rpx;
		/* margin-top: -80rpx; */
		/* 新增：往上叠一点，数值可以自己调 -20~-80rpx */
		position: relative;
		/* 新增 */
		z-index: 2;
		/* 新增：盖住 header 底边 */
	}


	.card {
		background: #ffffffee;
		border-radius: 28rpx;
		box-shadow: 0 8rpx 20rpx rgba(47, 64, 41, 0.15);
		padding: 25rpx;
		border: 1rpx solid #d6e4d2;
		/* 新增：为了让右上角图标绝对定位 */
		position: relative;
	}

	/* 右上角二维码图标 */
	.qr-icon {
		position: absolute;
		top: 18rpx;
		right: 20rpx;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.12);
		background: #ffffffcc;
		padding: 6rpx;
		box-sizing: border-box;
	}

	/* 按下轻微反馈 */
	.qr-icon:active {
		transform: scale(0.9);
		opacity: 0.8;
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		height: 80rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 5rpx;
		border: 3rpx solid #b7d3b0;
	}

	.name-level {
		display: flex;
		align-items: flex-end;
		/* 改成底部对齐 */
		gap: 20rpx;
		flex: 1;
		height: 100%;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
		color: #2f4029;
		position: relative;
		align-self: flex-end;
		/* 单独保证名字在底部 */
	}

	.badge-corner {
		position: absolute;
		top: -12rpx;
		right: -30rpx;
		transform: translate(30%, -30%);
		background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 105, 180, 0.9));
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
		font-weight: bold;
		z-index: 10;
		overflow: hidden;
	}


	/* 玻璃反光流光效果 */
	.badge-corner::after {
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(120deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
		transform: skewX(-25deg);
		animation: shineMove 3s infinite;
	}

	@keyframes shineMove {
		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}

	.actions {
		display: flex;
		gap: 10rpx;
	}

	.action-btn {
		font-size: 24rpx;
		padding: 1rpx 8rpx;
		border-radius: 12rpx;

		color: #fff;
	}

	.action-btn.review {
		background: #f6c344;
	}

	.action-btn.detail {

		color: #333;
	}

	/* 三个统计项 */
	.stats {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		gap: 20rpx;
	}

	.card-actions {
		margin-top: 20rpx;
		display: flex;
		gap: 16rpx;
	}

	/* 通用按钮底样式 */
	.card-btn {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 18rpx;
		border: none;
		font-size: 26rpx;
		color: #ffffff;
		box-shadow: 0 4rpx 10rpx rgba(47, 64, 41, 0.18);
		/* 动效：缩放 + 阴影变化 */
		transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	}

	/* 按下时的轻微动效（uni-app 里 :active 可用） */
	.card-btn:active {
		transform: scale(0.96) translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(47, 64, 41, 0.2);
		opacity: 0.9;
	}

	/* 🌱 成长报告：嫩绿色系 */
	.card-btn-report {
		background: linear-gradient(135deg, #a8e6a3, #7dc28b);
	}

	/* 📅 课程安排：蓝绿日程感 */
	.card-btn-schedule {
		background: linear-gradient(135deg, #8fd3f4, #74c0c3);
	}

	/* ✏️ 修改信息：暖橙色系 */
	.card-btn-edit {
		background: linear-gradient(135deg, #f8e1c2, #f3b27a);
		color: #5f2b02;
	}

	.card-btn-qrcode {
		background: linear-gradient(135deg, #c3bdf6, #8d83e6);
	}


	.stat-item {
		flex: 1;
		text-align: center;
		color: #2f4029;
		border-radius: 16rpx;
		padding: 15rpx;
		box-shadow: 0 4rpx 10rpx rgba(47, 64, 41, 0.08);
	}

	.stat-label {
		display: block;
		font-size: 26rpx;
		color: #5f2b02;
	}

	.divider {
		height: 2rpx;
		background: #cde6c4;
		margin: 8rpx 0;
	}

	.stat-value {
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		color: #2f4029;
	}

	/* 新增人员卡片 */
	.add-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
		border: 2rpx dashed #b7d3b0;
		background: #ffffffee;
		border-radius: 20rpx;
	}

	.add-symbol {
		font-size: 70rpx;
		color: #5f2b02;
	}

	.add-text {
		font-size: 30rpx;
		color: #5f2b02;
		margin-top: 12rpx;
	}

	/* 弹窗 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal {
		background: #f1f7ec;
		border-radius: 20rpx;
		width: 80%;
		padding: 40rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
		/* transform: scale(0.9); */
		/* opacity: 0; */
		/* animation: scaleIn 0.3s forwards, fadeOut 0.3s reverse; */
	}

	.modal-header {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
		color: #2f4029;
	}

	.modal-body {
		display: flex;
		flex-direction: column;
		gap: 35rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 20rpx;
	}

	.label {
		flex: 0 0 150rpx;
		/* 固定宽度保证对齐 */
		text-align: center;
		font-size: 28rpx;
		color: #2f4029;
	}

	.red-font {
		color: red;
	}

	.input {
		flex: 1;
		border: 1rpx solid #ccc;
		border-radius: 12rpx;
		padding: 0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		box-sizing: border-box;
	}

	.picker {
		flex: 1;
		border: 1rpx solid #ccc;
		border-radius: 12rpx;
		padding: 0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #555;
		box-sizing: border-box;
	}

	.radio-group {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 40rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #2f4029;
	}

	.modal-footer {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}

	.modal-btn {
		flex: 1;
		margin: 0 10rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	.modal-btn.cancel {
		background: #ccc;
		color: #333;
	}

	.modal-btn.confirm {
		background: #7dc28b;
		color: #000000;
	}

	/* 弹窗动画 */
	@keyframes scaleIn {
		0% {
			transform: scale(0.9);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	/* 背景遮罩 */
	.qr-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.45);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	/* 弹窗卡片 */
	.qr-modal {
		width: 520rpx;
		background: #f1f7ec;
		/* 温柔浅绿 */
		border-radius: 30rpx;
		padding: 80rpx 40rpx 60rpx;
		text-align: center;
		position: relative;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
	}

	/* 标题 */
	.qr-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2f4029;
		margin-bottom: 40rpx;
	}

	/* 二维码容器：关键！强制居中 */
	.qr-box {
		width: 100%;
		margin-top: 32px;
		display: flex;
		justify-content: center;
	}

	/* 圆形关闭按钮 (不占布局，绝对定位！) */
	.qr-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #ffffffcc;
		font-size: 40rpx;
		line-height: 60rpx;
		text-align: center;
		color: #2f4029;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
		transition: 0.15s;
	}

	.qr-close:active {
		transform: scale(0.9);
		opacity: 0.7;
	}

	/* 弹出动画 */
	.animate-scale {
		animation: scaleIn .25s ease-out;
	}

	@keyframes scaleIn {
		0% {
			transform: scale(0.85);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.qr-subtitle {
		display: block;
		font-size: 24rpx;
		color: #5f6b56;
		margin-bottom: 30rpx;
		line-height: 1.6;
		padding: 0 10rpx;
	}

	.qr-actions {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}

	.qr-save-btn {
		padding: 0 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 999rpx;
		border: none;
		font-size: 26rpx;
		background: linear-gradient(135deg, #8fd3f4, #74c0c3);
		color: #ffffff;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
	}

	/* 按下态 */
	.qr-save-btn:active {
		transform: scale(0.96) translateY(2rpx);
		opacity: 0.9;
	}

	.class-status {
		margin-top: 10rpx;
		padding: 10rpx 20rpx;
		background: rgba(255, 255, 255, 0.7);
		border: 1rpx solid #d8e6d4;
		border-radius: 14rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(8rpx);
	}

	.class-status {
		margin-top: 10rpx;
		padding: 10rpx 18rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 14rpx;
		border: 1rpx solid #d8e6d4;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.status-row {
		display: flex;
		align-items: center;
		/* 防止子元素被莫名挤换行 */
		min-width: 0;
	}

	.dot {
		color: #38c172;
		margin-right: 6rpx;
		font-size: 24rpx;
	}

	.status-main {
		font-size: 24rpx;
		color: #2f4029;
	}

	.status-scroll-wrapper {
		flex: 1;
		/* 中间占满 */
		min-width: 0;
		/* ★ 让 scroll-view 能缩进去 */
		margin: 0 8rpx;
	}

	.status-scroll {
		white-space: nowrap;
		overflow: hidden;
	}

	.scroll-inner {
		display: inline-flex;
		align-items: center;
	}

	.status-meeting {
		font-size: 22rpx;
		color: #6b7a67;
		flex-shrink: 0;
		/* 不要被挤换行 */
	}

	.sep {
		color: #a5b3a1;
		margin: 0 0rpx;
		font-size: 22rpx;
	}

	/* 中间滚动区域：只负责裁剪 */
	.status-scroll-wrapper {
		flex: 1;
		min-width: 0;
		margin: 0 4rpx;
		overflow: hidden;
		/* 超出隐藏 */
	}

	/* 内层文字真正做动画 */
	.status-scroll-inner {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		animation: statusMarquee 8s linear infinite alternate;
	}

	/* 来回滚动动画 */
	@keyframes statusMarquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-110rpx);
		}

		/* 滚动距离可按实际调整 */
	}

	.status-meeting {
		display: flex;
		align-items: center;
		padding: 1rpx 10rpx;
		border-radius: 999rpx;
		/* 胶囊形状 */
		background: #fff7e6;
		/* 淡橙底 */
		border: 1rpx solid #ffd591;
		margin-left: 10rpx;
		flex-shrink: 0;
		/* 不要被挤换行 */
	}

	.meeting-icon {
		font-size: 24rpx;
		margin-right: 6rpx;
	}

	.meeting-text {
		font-size: 22rpx;
		color: #d46b08;
		/* 偏橙色，看起来像按钮 */
	}

	/* 按下的反馈，让用户有“点到了”的感觉 */
	.status-meeting:active {
		opacity: 0.8;
		transform: scale(0.96);
	}
</style>